import React, { FC, memo } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout, Spin } from 'antd'
import styles from './MainLayout.module.scss'
import Logo from '../components/Logo'
import UserInfo from '../components/UserInfo'
import useLoadUserData from '../hook/useLoadUserData'
import useNavPage from '../hook/useNavPage'
const MainLayout: FC = () => {
  const { Header, Content, Footer } = Layout
  const { waitingUserData } = useLoadUserData()
  useNavPage(waitingUserData)
  return (
    <Layout>
      <Header className={styles.header}>
        <div className={styles.left}>
          <Logo />
        </div>

        <div className={styles.right}>
          <UserInfo />
        </div>
      </Header>
      <Content className={styles.main}>
        {waitingUserData ? (
          <div style={{ textAlign: 'center', marginTop: '100px' }}>
            <Spin></Spin>
          </div>
        ) : (
          <Outlet></Outlet>
        )}
      </Content>
      <Footer className={styles.footer}>小季问卷 &copy; 2023 -present. created by 小季</Footer>
    </Layout>
  )
}

export default MainLayout
